<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script src="js/lib/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
    <h1>Jacqui's Flower Shop</h1>
    <form method="post">
        <div id="oblock">        
            <div class="dtable">
                <div id="row1" class="drow">
                    <div class="dcell">
                        <img src="img/aster.png"/><label for="aster">Aster:</label>
                        <input id="aster" value="0" required />
                    </div>
                    <div class="dcell">
                        <img src="img/daffodil.png"/><label for="daffodil">Daffodil:</label>
                        <input id="daffodil" value="0" required />
                    </div>
                    <div class="dcell">
                        <img src="img/rose.png"/><label for="rose">Rose:</label>
                        <input id="rose" value="0" required />
                    </div>                
                </div>
                <div id="row2" class="drow">
                    <div class="dcell">
                        <img src="img/peony.png"/><label for="peony">Peony:</label>
                        <input id="peony" value="0" required />
                    </div>
                    <div class="dcell">
                        <img src="img/primula.png"/><label for="primula">Primula:</label>
                        <input id="primula" value="0" required />
                    </div>            
                    <div class="dcell">
                        <img src="img/snowdrop.png"/><label for="snowdrop">Snowdrop:</label>
                        <input id="snowdrop" value="0" required />
                    </div>            
                </div>            
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Place Order</button></div>
        <script type="text/javascript">
            $(document).ready(function () {
//                插入元素
                var fNames = ["Carnation", "Lily", "Orchid"];
                var $row = $('<div id="row3" class="drow"></div>');
                var $dtable = $(".dtable");
                var $dcell = $('<div class="dcell"><img/><label></label> <input value="0" required /></div>');
//                console.log($dcell.get(0));
                for(var i = 0;i < fNames.length; i++){
                    $dcell.clone().children("img").attr("src","img/" + fNames[i].toLowerCase() +".png")
                            .next().attr("for",fNames[i]).text(fNames[i]+":")
                            .next().attr("id",fNames[i]).parent().appendTo($row);
                }
                $row.appendTo($dtable);

//                左右按钮
                $('<a class="left"></a><a class="right"></a>').css({
                    display: "inline-block",
                    width: 50,
                    height: 50,
                    float: "left",
                    "margin-top": 17,
                    background: "url('img/rightarrows.png')"
                }).appendTo("#oblock").on({
                    "mouseenter": function () {
                        $(this).css("background-position","-50px 0px")
                    },
                    "mouseleave": function () {
                        $(this).css("background-position","0px 0px")
                    },
                    "click": handlePage
                });
                $('.left').css({
                    background: "url('img/leftarrows.png')"
                }).insertBefore('.dtable');

//                增加边框
                $dtable.css({
                    display: "inline-block",
                    border: "1px solid black",
                    float: "left"
                });

//                整体居中
                $('#oblock').css({
                    width: 770,
                    margin: "0 auto"
                });

//                只显示一行
                $('.drow').not('#row1').css({
                    display: "none"
                });

//                提交按钮的位置
                $('#buttonDiv').css({
                    clear: "both",
                    "padding-top": 20
                });
//                总计
                $('<div id="sum">总数:<span>0</span></div>').prependTo("#buttonDiv").css("padding-bottom","5px");
                $("input").on("change",function () {
                    var sum = 0;
                    //each遍历获取到的所有input的标签,i是一个参数,表示从i=0开始遍历,elem当前元素
                    $("input").each(function (i,elem) {
                        sum += new Number($(elem).val());
                    });
                    $("#sum").children("span").text(sum);
//                    alert(sum);
                });
                $("#buttonDiv").children("button").on("click",function () {
                    var sum = 0;
                    $("input").each(function (i,elem) {
                        sum += new Number($(elem).val());
                    });
                   alert("您已经购买" + sum + "束花");
                });

//                行切换,判断当前第几行下标,点击的是上一页按钮还是下一页按钮,得出要显示的行下标
                function handlePage() {
                    var $drow = $('.drow');
//                    当前行下标
                    var currentIndex = $drow.not(":hidden").index();
                    var nextIndex;
//                    console.log(currentIndex);
//                    点击的是哪个按钮,即将显示的行的下标
                    if($(this).hasClass("left")){
                        nextIndex = currentIndex - 1;
                        if(nextIndex <0){
                            nextIndex = $drow.length - 1;
                        }
                    }
                    else {
                        nextIndex = currentIndex + 1;
                        if(nextIndex == $drow.length){
                            nextIndex = 0;
                        }
                    }

//                    隐藏当前行,显示下一行
//                    $drow.eq(currentIndex).css("display","none").end()
//                            .eq(nextIndex).css("display","block");

//                    动画显示
                    $drow.eq(currentIndex).fadeOut("fast",function () {
                        $drow.eq(nextIndex).fadeIn("fast");
                    });
                }
            });
        </script>
    </form>
</body>
</html>
